<template>
  <view class="set-container" style="padding-bottom: 30rpx;">
	  <view class="topVue">
	  	<view class="status"></view>
	  	<view class="navVue">
	  		<image src="../../static/imgs/back.png" style="width: 36rpx; height: 36rpx;" @click="backFun"></image>
	  		
	  		<view class="nav-title">仓位设置</view>
	  		<view style="width: 36rpx; height: 36rpx;" @click="toDetail"></view>	
	  	</view>
	  </view>
	  
	  <view class="place"></view>
	  
    <view class="box">
      <view class="title">{{ $t("整体止盈") }}</view>
      <view class="label">
        <text>{{ $t("整体止盈比例") }}：</text>
        <u--input
          v-model="form.overWinRate"
          :placeholder="$t('请输入')"
          placeholderStyle="{color: #999999}"
        ></u--input>
        <text class="ratio">%</text>
      </view>
      <view class="label">
        <text>{{ $t("整体回降比例") }}：</text>
        <u--input
          v-model="form.overLossRate"
          :placeholder="$t('请输入')"
          placeholderStyle="{color: #999999}"
        ></u--input>
        <text class="ratio">%</text>
      </view>
      <text class="tip">{{
        $t(
          "盈利金额达到持仓费用比例后，触发追踪止盈，达到最大值后，减少回降比例，只卖出平仓"
        )
      }}</text>
    </view>
    <view class="box">
      <view class="title">{{ $t("网格止盈") }}</view>
      <view class="label">
        <text>{{ $t("网格止盈比例") }}：</text>
        <u--input
          v-model="form.gridWinRate"
          :placeholder="$t('请输入')"
          placeholderStyle="{color: #999999}"
        ></u--input>
        <text class="ratio">%</text>
      </view>
      <view class="label">
        <text>{{ $t("网格回降比例") }}：</text>
        <u--input
          v-model="form.gridLossRate"
          :placeholder="$t('请输入')"
          placeholderStyle="{color: #999999}"
        ></u--input>
        <text class="ratio">%</text>
      </view>
      <text class="tip">{{
        $t(
          "当改组策略进行中的最后一单追踪止盈结束后，卖出策略里符合盈利条件的订单。（设置为99表示不启用该功能）"
        )
      }}</text>
    </view>
    <view class="box">
      <view class="title">{{ $t("建仓均价参考") }}</view>
      <u-radio-group
        v-model="form.openReferType"
        activeColor="#D55B94"
        placement="row"
      >
        <u-radio
          size="40"
          labelSize="30"
          labelColor="#333"
          :label="$t('使用整体持仓均价')"
          name="1"
        ></u-radio>
        <u-radio
          size="40"
          labelSize="30"
          labelColor="#333"
          :label="$t('使用尾单均价')"
          name="2"
        ></u-radio>
      </u-radio-group>
    </view>
    <view class="box">
      <view class="title">{{ $t("追踪建仓") }}</view>
      <view class="label">
        <text>{{ $t("追踪建仓上调比例") }}：</text>
        <u--input
          v-model="form.traceRate"
          :placeholder="$t('请输入')"
          placeholderStyle="{color: #999999}"
        ></u--input>
        <text class="ratio">%</text>
      </view>
      <text class="tip">{{
        $t("仅方向行情结束后再进行建仓(设置为0表示不启用该功能)")
      }}</text>
    </view>
    <view class="box">
      <view class="title">{{ $t("平仓参考") }}</view>
      <u-checkbox-group activeColor="#D55B94" v-model="form.closeType" placement="row">
        <u-checkbox size="40" labelSize="30" :label="$t('只卖不买')" name="1">
        </u-checkbox>
        <u-checkbox size="40" labelSize="30" :label="$t('止盈停止')" name="2">
        </u-checkbox>
      </u-checkbox-group>
    </view>
    <view class="btns">
      <u-button
        class="close"
        type="primary"
        :text="$t('取消')"
        @click="close"
      ></u-button>
      <u-button type="primary" :text="$t('确定')" @tap="submint"></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        overWinRate: "3",
        overLossRate: "1",
        gridWinRate: "99",
        gridLossRate: "1",
        openReferType: null,
        traceRate: "1",
        closeType: "2",
      },
      id: null,
    };
  },
  methods: {
	  backFun() {
	  	uni.navigateBack({
	  		delta: 1
	  	})
	  },
    submint() {
      console.log(this.form);
      this.$http
        .post(
          `/front/trade/setStrategyZN?id=${this.id}&overWinRate=${this.form.overWinRate}&overLossRate=${this.form.overLossRate}&gridWinRate=${this.form.gridWinRate}&gridLossRate=${this.form.gridLossRate}&openReferType=${this.form.openReferType}&traceRate=${this.form.traceRate}&closeType=${this.form.closeType}
				`
        )
        .then((res) => {
          if (res.code === 0) {
            uni.$u.toast(this.$t("策略设置成功"));
            uni.navigateBack();
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    close() {
      uni.navigateBack();
    },
  },
  onLoad(options) {
    if (options) {
      this.form.overWinRate =
        options.overWinRate.trim() != "" || !options.overWinRate
          ? options.overWinRate
          : "3";
      this.form.overLossRate =
        options.overLossRate.trim() != "" || !options.overLossRate
          ? options.overLossRate
          : "1";
      this.form.gridWinRate =
        options.gridWinRate.trim() != "" || !options.gridWinRate
          ? options.gridWinRate
          : "99";
      this.form.gridLossRate =
        options.gridLossRate.trim() != "" || !options.gridLossRate
          ? options.gridLossRate
          : "1";
      this.form.openReferType =
        options.openReferType.trim() != "" || !options.openReferType
          ? options.openReferType
          : null;
      this.form.traceRate =
        options.traceRate.trim() != "" || !options.traceRate
          ? options.traceRate
          : "1";

      if (options.closeType === "3") {
        this.form.closeType = ["1", "2"];
      } else if (options.closeType === "0") {
        this.form.closeType = [];
      } else {
        this.form.closeType = [options.closeType];
      }
      this.id = options.id;
    }
  },
};
</script>

<style lang="scss" scoped>
.set-container {
  width: 100%;
  min-height: 100%;
  background: url("../../static/imgs/bg.png") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  position: relative;
  .place {
  	height: calc(var(--status-bar-height) + 92rpx);
  }
  
  .topVue {
  	width: 100%;
  	position: absolute;
  	left: 0;
  	top: 0;
  	z-index: 99;
  
  	.status {
  		width: 100%;
  		height: var(--status-bar-height);
  	}
  
  	.navVue {
  		width: 100%;
  		height: 92rpx;
  		background: linear-gradient(to right, #FFFBFF, #FFE7F4);
  		display: flex;
  		justify-content: space-between;
  		align-items: center;
  		box-sizing: border-box;
  		padding: 0 30rpx;
  
  		.nav-title {
  			width: 420rpx;
  			height: 92rpx;
  			font-size: 36rpx;
  			color: #04094C;
  			text-align: center;
  			line-height: 92rpx;
  		}
  	}
  }

  .box {
	  width: 690rpx;
    padding: 30rpx;
    margin-bottom: 10rpx;
    background: #fff;
	margin: 20rpx auto 0;
	box-sizing: border-box;
    border-radius: $border-radius-20;

    .title {
      margin-bottom: 45rpx;
      font-size: $uni-font-size-36;
    }

    .label {
      display: flex;
      align-items: center;
      margin-bottom: 25rpx;

      /deep/ .u-input {
        width: 140rpx;
        flex: none;
        margin-right: 20rpx;
        border-color: transparent !important;
        background: #ececec;
        border-radius: 10px;

        .uni-input-input {
          color: #333;
        }
      }

      .ratio {
        color: $uni-text-color-grey;
      }
    }

    .tip {
      font-size: $uni-font-size-26;
      color: $uni-text-color-grey;
    }

    .u-radio {
      margin-bottom: 40rpx;
    }

    .u-checkbox {
      margin-right: 80rpx;
    }
  }

  .btns {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30rpx auto;
    font-size: $uni-font-size-30;

    .u-button {
      width: 280rpx;
      height: 80rpx;
      border: 1rpx solid #D55B94;
      background-color: #D55B94;
      border-radius: $border-radius-20;
    }

    .close {
      background: #D55B94;
      color: #fff;
    }
  }
}
</style>
